<script lang="ts" setup>
import { computed } from 'vue';
import { type RouteRecordRaw } from 'vue-router';
import SidebarItemLink from './SidebarItemLink.vue';
import { isExternal } from '@/utils/validate';
import path from 'path-browserify';

interface Props {
	item: RouteRecordRaw;
	basePath?: string;
}

const props = withDefaults(defineProps<Props>(), {
	basePath: '',
});

/** 是否始终显示根菜单 */
const alwaysShowRootMenu = computed(() => props.item.meta?.alwaysShow);

/** 显示的子菜单 */
const showingChildren = computed(() => {
	return props.item.children?.filter((child) => !child.meta?.hidden) ?? [];
});

/** 显示的子菜单数量 */
const showingChildNumber = computed(() => {
	return showingChildren.value.length;
});

/** 唯一的子菜单项 */
const theOnlyOneChild = computed(() => {
	const number = showingChildNumber.value;
	switch (true) {
		case number > 1:
			return null;
		case number === 1:
			return showingChildren.value[0];
		default:
			return { ...props.item, path: '' };
	}
});

/** 解析路径 */
/** https?:|mailto:|tel: */
const resolvePath = (routePath: string) => {
	switch (true) {
		case isExternal(routePath):
			return routePath;
		case isExternal(props.basePath):
			return props.basePath;
		default:
			return path.resolve(props.basePath, routePath); // 路径拼接 '/home/table'
	}
};
</script>

<template>
	<!-- 根菜单且只有一个子菜单且没有子菜单项 && meta.alwaysShow==false ==> 只展示最底层菜单隐藏root菜单项 -->
	<template v-if="!alwaysShowRootMenu && theOnlyOneChild && !theOnlyOneChild.children">
		<SidebarItemLink v-if="theOnlyOneChild.meta" :to="resolvePath(theOnlyOneChild.path)">
			<el-menu-item :index="resolvePath(theOnlyOneChild.path)">
				<!-- svg -->
				<SvgIcon v-if="theOnlyOneChild.meta.svgIcon" :name="theOnlyOneChild.meta.svgIcon" />
				<!-- elIcon -->
				<component v-else-if="theOnlyOneChild.meta.elIcon" :is="theOnlyOneChild.meta.elIcon" class="el-icon" />
				<template v-if="theOnlyOneChild.meta.title" #title>
					{{ theOnlyOneChild.meta.title }}
				</template>
			</el-menu-item>
		</SidebarItemLink>
	</template>
	<el-sub-menu v-else :index="resolvePath(props.item.path)" teleported>
		<template #title>
			<SvgIcon v-if="props.item.meta?.svgIcon" :name="props.item.meta.svgIcon" />
			<component v-else-if="props.item.meta?.elIcon" :is="props.item.meta.elIcon" class="el-icon" />
			<span v-if="props.item.meta?.title">{{ props.item.meta.title }}</span>
		</template>
		<template v-if="props.item.children">
			<SidebarItem v-for="child in showingChildren" :key="child.path" :item="child" :base-path="resolvePath(child.path)" />
		</template>
	</el-sub-menu>
</template>

<style lang="scss" scoped>
.svg-icon {
	min-width: 1em;
	margin-right: 12px;
	font-size: 18px;
}

.el-icon {
	width: 1em;
	margin-right: 12px;
	font-size: 18px;
}
</style>
